<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../../../../Public/source/layui/css/layui.css" />
		<!--<link rel="stylesheet" href="../../../Public/source/css/Home_User_inf.css"/>-->
		<link rel="stylesheet" href="../../../../../Public/source/css/animate.css" />
		<style type="text/css">
			form {
				margin-top: 5%;
				width: 60%;
				margin-left: 20%;
			}
			
			.password {
				display: none;
			}
			
			.altercolor {
				color: red;
			}
			
			#submit {
				position: relative;
				display: block;
				text-align: center;
				left: -57%;
				width: 157%;
				height: 35px;
				line-height: 35px;
				color: #ffffff;
				background-color: #009688;
			}
		</style>
	</head>

	<body>
		<form class="layui-form layui-form-pane" lay-filter="formTest">
			<div class="layui-form-item" pane>
				<label class="layui-form-label" id="name">姓名</label>
				<div class="layui-input-block">
					<input id="Iname" onblur="Lname()" type="text " name="name" placeholder="请输入要修改的姓名" autocomplete="on" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item" pane>
				<label class="layui-form-label">班级</label>
				<div class="layui-input-block">
					<input id="Iclass" onblur="Lclass()" type="text" name="class" placeholder="请输入要修改的班级" autocomplete="on" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item" pane>
				<label class="layui-form-label">学院</label>
				<div class="layui-input-block">
					<input id="Icollege" onblur="Lcollege()" type="text" name="college" placeholder="请输入要修改的学院 " autocomplete="on" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item" pane>
				<label class="layui-form-label">组别</label>
				<div class="layui-input-block">
					<input id="Igroup" onblur="Lgroup()" type="text" name="group" placeholder="请输入要修改的组别 " autocomplete="on" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item" pane>
				<label class="layui-form-label">性别</label>
				<div class="layui-input-block">
					<input type="radio" name="sex" value="男" title="男" checked>
					<input type="radio" name="sex" value="女" title="女">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<label onclick="sub()" id="submit">立即提交</label>
				</div>
			</div>
		</form>
		<script type="text/javascript" src="../../../../../Public/source/layui/layui.js"></script>
		<script type="text/javascript" src="../../../../../Public/source/layui/layui.all.js"></script>
		<script type="text/javascript" src="../../../../../Public/source/jquery-1.11.3.js"></script>
		<script type="text/javascript" src="../../../../../Public/source/md5.js" ></script>
		<script>
			layui.use('form', function() {
				var form = layui.form,
					x1 = 1,
					x2 = 1,
					x3 = 1,
					x4 = 1,
					x,
					sex1,status1;
				//ajax获取数据
				$(function() {
					$.ajax({
						async: true,
						type: 'post',
						dataType: 'json',
						url: '__URL__/getAlterUser/id/{$result.id}', //后台提供接口
						data: {},
						success: function(data) {
							if(data.status > 0) {
								//表单初始赋值
								form.val("formTest", {
									"name": data.name,
									"class": data.class,
									"college": data.school,
									"sex": data.sex,
									"group": data.group
								});
								sex1=data.sex;
								status1=data.status;
								btnclass();
								form.render();
							} else {
								alert(data.info);
							}
						},
						error: function(data) {
							alert('error')
						}
					});
				});
				//动态为提交按钮添加animate特效
				function btnclass() {
					x = x1 + x2 + x3 + x4 ;
//					var n = document.getElementById("Iname");
//					n.value = String(x);
					var btn = document.getElementById("submit");
					if( x == 4)
						btn.classList.add("animated", "pulse");
					else {
						if(btn.classList.contains('animated'))
							btn.classList.remove("animated", "pulse");
					}
				}

				//监听用户名输入
				window.Lname = function() {
					var x = document.getElementById("Iname");
					if(x.value.length != 0) x1 = 1;
					else x1 = 0;
					btnclass();
					form.render();
				}

				//监听班级输入
				window.Lclass = function() {
					var x = document.getElementById("Iclass");
					if(x.value.length != 0) x2 = 1;
					else x2 = 0;
					btnclass();
					form.render();
				}
				//监听组别输入
				window.Lgroup = function() {
					var x = document.getElementById("Igroup");
					if(x.value.length != 0) x4 = 1;
					else x4 = 0;
					btnclass();
					form.render();
				}

				//监听学院输入
				window.Lcollege = function() {
					var x = document.getElementById("Icollege");
					if(x.value.length != 0) x3 = 1;
					else x3 = 0;
					btnclass();
					form.render();
				}

				
				form.on('radio', function(data){
  				    sex1=data.value;
				});  

				window.sub = function() {
					var name1 = document.getElementById("Iname");
					var class1 = document.getElementById("Iclass");
					var college1 = document.getElementById("Icollege");
					var group1 = document.getElementById("Igroup");
					$(function() {
						$.ajax({
							async: true,
							type: 'post',
							dataType: 'json',
							url: '__URL__/alterUser/id/{$result.id}', //后台提供接口
							data: {
								name: name1.value,
								class: class1.value,
								school: college1.value,
								group:group1.value,
								sex:sex1,
								status:status1
							},
							success: function(data) {
								if(data.status == 1) {
									alert("修改成功");
									window.parent.location.reload();
									var index = parent.layer.getFrameIndex(window.name);
									parent.layer.close(index);

								} else {
									alert(data.info)
								}
							},
							error: function(data) {
								alert('error')
							}
						});
					});
				}
			});
		</script>
	</body>

</html>